<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../../plugins/echarts.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/order.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="app">
    <div id="main" style="width: 400px;height:300px;"></div>
    <div id="main2" style="width: 400px;height:300px; "></div>
    <div id="main3" style="width: 400px;height:300px; "></div>
    <div id="main4" style="width: 400px;height:300px; "></div>
    <div id="main5" style="width: 400px;height:300px; "></div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    // var myChart2 = echarts.init(document.getElementById('main2'));
    // var myChart3 = echarts.init(document.getElementById('main3'));
    // var myChart4 = echarts.init(document.getElementById('main4'));
    // var myChart5 = echarts.init(document.getElementById('main5'));

    // 指定图表的配置项和数据



/*    option2 = {
        title: {
            text: '套餐营收分析',
            subtext: '套餐',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '40%',
                data: [
                    {"value": 1048, "name": "儿童套餐A计划"},
                    {"value": 735, "name": "黑马毕业豪华套餐"},
                    {"value": 580, "name": "一荤两素经济套餐"}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    option3 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ]
            }
        ]
    };
    option4 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ]
            }
        ]
    };
    option5 = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    };*/

    new Vue({
        el: '#app',
        data() {
            return {}
        },
        mounted() {
            this.dishCategoryCash();
        },
        methods: {
            dishCategoryCash(){
                var myChart = echarts.init(document.getElementById('main'));

                axios.get("/statics/dishCash").then((res) => {
                    console.log(res.data);
                    option = {
                        title: {
                            text: '菜系营收分析',
                            subtext: '菜系',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '40%',
                                data: res.data.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    myChart.setOption(option);
                })
            },

        }

    })

    // 使用刚指定的配置项和数据显示图表。
    // myChart2.setOption(option2);
    // myChart3.setOption(option3);
    // myChart4.setOption(option4);
    // myChart5.setOption(option5);
</script>
</body>
</html>